import React from 'react'
import {Input} from 'antd-mobile'
import {Button,List} from 'antd'
import { useEffect } from 'react'
import { useState } from 'react'
import {connect} from 'react-redux'
import {getBannerList,getvalueList,getbtnlist} from '../store/actionCreators'

 function TodoList(props) {
   const {inputValue,list,value,getlistdispatch,getvaluedispatch,getbtndispatch}=props
    useEffect(()=>{
        console.log(props)
       console.log(value)
    })
    const changeinput=(e)=>{
        console.log(e)
         getlistdispatch(e)
        
    }
    const clickBtn=()=>{
       
        getvaluedispatch()
    }
    const removebtn=(index)=>{
         
        getbtndispatch(index)
    }
    return ( 
        <div style={{margin:'10px'}}>
            <div>
                <Input placeholder={inputValue} style={{ width:'250px', marginRight:'10px'}}
                onChange={(e)=>changeinput(e)}
                />
                <Button type="primary" onClick={()=>clickBtn()}>增加</Button>
            </div>
            <div style={{margin:'10px',width:'300px'}}>
                <List
                    bordered
                    //关键代码-----------start
                    dataSource={list}
                    //关键代码-----------end
                    renderItem={(item,index)=>(<List.Item>{
                        <div>
                            {item}
                    <Button type='primary' onClick={()=>removebtn(index)}>x</Button>
                        </div>
                        
                    }</List.Item>)}
                />    
            </div>
            </div>
            )
           
      
} 
const mapStateToProps=(state)=>{
                return{
                    inputValue:state.inputValue,
                    list:state.list,
                    value:state.value

                }               
            }
 const mapDispatchToProps=(dispatch)=>{
                return {
                    getlistdispatch(e){
                    dispatch(getBannerList(e))
                },
                getvaluedispatch(){
                    dispatch(getvalueList())
                },
                getbtndispatch(index){
                    dispatch(getbtnlist(index))
                }
            }
            }

export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
